<!-- home -->
<template>
  <page-view :full="true">
    <top-bar title="我的钱包"
             :white="false">
      <div @click="goStream">流水记录</div>
    </top-bar>
    <page-content class="product">
      <div class="w-container">
        <!-- <div class="w-header">
          <img src="../../assets/image/mine/m_arrow.png"
               alt=""
               class="w-back">
          <span class="w-m">我的钱包</span>
          <span class="w-j"
                @click="goStream">流水记录</span>
        </div> -->
        <div class="w-box">
          <div class="w-item"
               @click="goDetail(1)">
            <div class="w-line">
              <div>
                <img src="../../assets/image/mine/m_green.png"
                     alt=""
                     class="w-blue">
                <span class="w-name">XCH</span>
              </div>
              <span class="w-icon">
                <van-icon name="arrow"
                          color="#AEADB9"
                          size="14" />
              </span>
            </div>
            <p class="w-ye">可用余额</p>
            <p class="w-money">{{xch}}</p>
          </div>
          <div class="w-item">
            <div class="w-line"
               @click="goDetail(0)">
              <div>
                <img src="../../assets/image/mine/m_blue.png"
                     alt=""
                     class="w-blue">
                <span class="w-name">BZZ</span>
              </div>
              <span class="w-icon">
                <van-icon name="arrow"
                          color="#AEADB9"
                          size="14" />
              </span>
            </div>
            <p class="w-ye">可用余额</p>
            <p class="w-money">{{bzz}}</p>
          </div>
        </div>

      </div>
    </page-content>
  </page-view>
</template>

<script>
import TopBar from '@/components/TopBar';
import PageView from '@/components/PageView';
import PageContent from '@/components/PageContent';
import PageEmpty from '@/components/Empty';
import service from '@/utils/request';

export default {
  components: {
    TopBar,
    PageView,
    PageContent
  },
  data () {
    return {
      bzz: '0.0000000',
      xch: '0.0000000'
    }
  },
  
  created(){
    this.user = this.$store.state.user || {};
    this.bzz = this.user.bzz;
    this.xch = this.user.xch;
  },

  methods: {
    goDetail (type) {
      this.$router.push({ path: `/walletDetail/${type}` })
    },
    goStream () {
      this.$router.push({ path: '/stream' })
    }
  }
}
</script>
<style lang="scss" scoped>
.w-container {
  width: 100vw;
  background: #fff;
  overflow: hidden;
  padding: 70px 20px 0 20px;
  box-sizing: border-box;
  .w-header {
    margin-top: 39px;
    height: 29px;
    line-height: 29px;
    display: flex;
    justify-content: space-between;
    .w-back {
      width: 22px;
      height: 22px;
    }
    .w-m {
      font-size: 21px;
      font-weight: 500;
      color: #000000;
    }
    .w-j {
      font-size: 14px;
      font-weight: 400;
      color: #878592;
    }
  }
  .w-box {
    height: auto;
    margin-top: 12px;
    .w-item {
      padding: 10px 0;
      height: 90px;
      border-bottom: 1px solid #eee;
      .w-line {
        display: flex;
        height: 20px;
        line-height: 20px;
        justify-content: space-between;
        .w-blue {
          width: 20px;
          height: 20px;
          vertical-align: middle;
        }
        .w-name {
          vertical-align: middle;
          font-size: 16px;
          font-weight: 500;
          color: #3d3e54;
          margin-left: 9px;
        }
        .w-icon {
          margin-top: 3px;
        }
      }
      .w-ye {
        height: 17px;
        font-size: 12px;
        font-weight: 400;
        color: #92919c;
        line-height: 17px;
        margin-top: 15px;
        margin-bottom: 7px;
      }
      .w-money {
        height: 28px;
        font-size: 20px;
        font-weight: 500;
        color: #3d3e54;
        line-height: 28px;
      }
    }
  }
}
</style>
